<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="utf-8">
    <title>登陆 - 仓储管理系统</title>
<link rel="stylesheet" th:href="@{/css/style.css}" href="css/style.css">
    <style type="text/css">
        .login{
            margin-top: 40px;
            margin-bottom: 20px;
            margin-left: 160px;
            background: #d4af7a;
            width: 260px;
            height: 36px;
            border-radius: 20px;
            border: none;
            color: white;
            font-family: 'Open Sans', Helvetica, Arial, sans-serif;
            font-size: 18px;
        }
        .msg{
            color: red;
            margin-left: 225px;
        }
        .lawless{
            color: red;
            margin-left: 258px;
        }
    </style>
</head>

<body>
    <div class="content">
        <form th:action="@{/user/login}" method="post" onSubmit="return beforeSubmit(this);">
        <div class="form sign-in">
            <h2>欢迎回来</h2>
            <span class="msg" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></span>
            <span class="lawless" th:text="${lawless}" th:if="${not #strings.isEmpty(lawless)}"></span>
            <label>
                <span>用户名</span>
                <input type="text" th:name="username" />
            </label>
            <label>
                <span>密码</span>
                <input type="password" th:name="password"/>
            </label>
            <p class="forgot-pass"><a href="javascript:">忘记密码？</a></p>
            <input type="submit" class="login" value="登录"/>
            <button type="button" class="fb-btn">使用 <span>facebook</span> 帐号登录</button>
        </div>
        </form>
        <div class="sub-cont">
            <div class="img">
                <div class="img__text m--up">
                    <h2>还未注册？</h2>
                    <p>立即注册，发现大量机会！</p>
                </div>
                <div class="img__text m--in">
                    <h2>已有帐号？</h2>
                    <p>有帐号就登录吧，好久不见了！</p>
                </div>
                <div class="img__btn">
                    <span class="m--up">注 册</span>
                    <span class="m--in">登 录</span>
                </div>
            </div>
            <form th:action="@{/user/register}" method="post">
            <div class="form sign-up">
                <h2>立即注册</h2>
                <label>
                    <span>用户名</span>
                    <input type="text" th:name="username"/>
                </label>
                <label>
                    <span>邮箱</span>
                    <input type="email" th:name="email"/>
                </label>
                <label>
                    <span>手机号</span>
                    <input type="text" th:name="phone"/>
                </label>
                <label>
                    <span>密码</span>
                    <input type="password" th:name="password"/>
                </label>
                <input type="submit" class="login" value="注册">
                <button type="button" class="fb-btn">使用 <span>facebook</span> 帐号注册</button>
            </div>
            </form>
        </div>
    </div>

    <script src="js/script.js" th:src="@{/js/script.js}"></script>
    <script type="text/javascript">
        function beforeSubmit(form){
            if(form.username.value==''){
                alert('用户名不能为空！');
                form.username.focus();
                return false;
            }
            if(form.password.value==''){
                alert('密码不能为空！');
                form.password.focus();
                return false;
            }
            if(form.password.value.length<6){
                alert('密码至少为6位，请重新输入！');
                form.password.focus();
                return false;
            }
            return true;
        }
    </script>
</body>

</html>